import { Card, Row, Col, Statistic } from 'antd';
import { VideoCameraOutlined, PlayCircleOutlined, CodeOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';

const Home = () => {
  return (
    <div>
      <h2>系统概览</h2>
      <Row gutter={16} style={{ marginTop: '24px' }}>
        <Col span={8}>
          <Link to="/video">
            <Card hoverable>
              <Statistic
                title="视频处理"
                value="MP4分离处理"
                prefix={<VideoCameraOutlined style={{ color: '#1677ff' }} />}
                valueStyle={{ color: '#1677ff' }}
              />
              <div style={{ marginTop: '12px', color: '#666' }}>
                提取MP4视频的音频为MP3和创建无音频的MP4
              </div>
            </Card>
          </Link>
        </Col>
        <Col span={8}>
          <Link to="/video">
            <Card hoverable>
              <Statistic
                title="网页特效"
                value="生成透明网页特效"
                prefix={<CodeOutlined style={{ color: '#52c41a' }} />}
                valueStyle={{ color: '#52c41a' }}
              />
              <div style={{ marginTop: '12px', color: '#666' }}>
                生成多个随机网页特效HTML，透明度为0.01-0.10
              </div>
            </Card>
          </Link>
        </Col>
        <Col span={8}>
          <Link to="/video">
            <Card hoverable>
              <Statistic
                title="视频特效"
                value="生成透明视频特效"
                prefix={<PlayCircleOutlined style={{ color: '#f5222d' }} />}
                valueStyle={{ color: '#f5222d' }}
              />
              <div style={{ marginTop: '12px', color: '#666' }}>
                生成多个随机视频特效MP4，透明度为0.01-0.10
              </div>
            </Card>
          </Link>
        </Col>
      </Row>

      {/* <h2 style={{ marginTop: '40px' }}>系统介绍</h2>
      <Card style={{ marginTop: '16px' }}>
        <p>这是一个视频处理管理系统，提供以下功能：</p>
        <ul>
          <li><strong>视频处理</strong>：提取MP4音频成MP3和无音频MP4，并将MP3切割成多个音频WAV小片段</li>
          <li><strong>网页特效生成</strong>：生成多个随机网页特效HTML，透明度为0.01-0.10</li>
          <li><strong>视频特效生成</strong>：生成多个随机视频特效MP4，透明度为0.01-0.10</li>
        </ul>
        <p>使用简单，只需上传视频文件或指定想要生成的特效数量即可。</p>
      </Card> */}
    </div>
  );
};

export default Home; 